<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>页面测试 - 百日行动线索收集系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <style>
        body { background-color: #f8f9fa; padding: 20px; }
        .test-section { background: white; padding: 20px; margin-bottom: 20px; border-radius: 10px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
        .status-ok { color: #28a745; }
        .status-error { color: #dc3545; }
        .status-warning { color: #ffc107; }
    </style>
</head>
<body>
    <div class="container">
        <h1 class="mb-4"><i class="fas fa-vial me-2"></i>页面功能测试</h1>
        
        <!-- 基本功能测试 -->
        <div class="test-section">
            <h3>🔧 基本功能测试</h3>
            <div id="basicTests">
                <p><i class="fas fa-spinner fa-spin me-2"></i>正在检测...</p>
            </div>
        </div>
        
        <!-- 下拉菜单测试 -->
        <div class="test-section">
            <h3>📋 下拉菜单测试</h3>
            <div class="row">
                <div class="col-md-6 mb-3">
                    <label class="form-label">乡镇街道选择</label>
                    <select class="form-select" id="testTownship">
                        <option value="">请选择乡镇街道</option>
                    </select>
                    <button onclick="loadTestData()" class="btn btn-primary btn-sm mt-2">加载测试数据</button>
                </div>
                <div class="col-md-6 mb-3">
                    <label class="form-label">线索分类选择</label>
                    <select class="form-select" id="testCategory">
                        <option value="">请选择线索分类</option>
                    </select>
                    <button onclick="loadCategoryData()" class="btn btn-success btn-sm mt-2">加载分类数据</button>
                </div>
            </div>
        </div>
        
        <!-- API连接测试 -->
        <div class="test-section">
            <h3>🌐 API连接测试</h3>
            <div class="row">
                <div class="col-md-6">
                    <button onclick="testAPI()" class="btn btn-info">测试API连接</button>
                    <button onclick="testHealthCheck()" class="btn btn-warning">健康检查</button>
                </div>
                <div class="col-md-6">
                    <div id="apiStatus" class="alert alert-secondary">等待测试...</div>
                </div>
            </div>
        </div>
        
        <!-- 日志区域 -->
        <div class="test-section">
            <h3>📝 测试日志</h3>
            <div id="logArea" style="height: 200px; overflow-y: auto; background: #f8f9fa; padding: 10px; border-radius: 5px; font-family: monospace; font-size: 12px;"></div>
            <button onclick="clearLog()" class="btn btn-outline-secondary btn-sm mt-2">清空日志</button>
        </div>
    </div>

    <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap/5.3.0/js/bootstrap.bundle.min.js"></script>
    <script>
        const API_BASE_URL = 'http://localhost:3001/api';
        
        // 日志函数
        function log(message, type = 'info') {
            const logArea = document.getElementById('logArea');
            const timestamp = new Date().toLocaleTimeString();
            const color = type === 'error' ? 'red' : type === 'success' ? 'green' : type === 'warning' ? 'orange' : 'blue';
            logArea.innerHTML += `<div style="color: ${color}">[${timestamp}] ${message}</div>`;
            logArea.scrollTop = logArea.scrollHeight;
            console.log(`[${timestamp}] ${message}`);
        }
        
        function clearLog() {
            document.getElementById('logArea').innerHTML = '';
        }
        
        // 基本功能检测
        function runBasicTests() {
            const basicTests = document.getElementById('basicTests');
            let results = [];
            
            // 检测jQuery
            results.push(`jQuery: ${typeof $ !== 'undefined' ? '✅ 已加载' : '❌ 未加载'}`);
            
            // 检测Bootstrap
            results.push(`Bootstrap: ${typeof bootstrap !== 'undefined' ? '✅ 已加载' : '❌ 未加载'}`);
            
            // 检测本地存储
            try {
                localStorage.setItem('test', 'test');
                localStorage.removeItem('test');
                results.push('LocalStorage: ✅ 可用');
            } catch (e) {
                results.push('LocalStorage: ❌ 不可用');
            }
            
            // 检测Fetch API
            results.push(`Fetch API: ${typeof fetch !== 'undefined' ? '✅ 支持' : '❌ 不支持'}`);
            
            basicTests.innerHTML = results.map(result => `<p>${result}</p>`).join('');
            log('基本功能检测完成');
        }
        
        // 加载测试数据
        function loadTestData() {
            const select = document.getElementById('testTownship');
            const testData = [
                { id: 1, name: '灵泉街道' },
                { id: 2, name: '秀江街道' },
                { id: 3, name: '湛郎街道' },
                { id: 4, name: '袁州街道' },
                { id: 5, name: '化成街道' }
            ];
            
            select.innerHTML = '<option value="">请选择乡镇街道</option>';
            testData.forEach(item => {
                const option = document.createElement('option');
                option.value = item.id;
                option.textContent = item.name;
                select.appendChild(option);
            });
            
            log(`成功加载 ${testData.length} 个测试乡镇街道`, 'success');
        }
        
        function loadCategoryData() {
            const select = document.getElementById('testCategory');
            const testData = [
                { name: '经济犯罪' },
                { name: '网络犯罪' },
                { name: '涉黄涉赌' },
                { name: '其他违法行为' }
            ];
            
            select.innerHTML = '<option value="">请选择线索分类</option>';
            testData.forEach(item => {
                const option = document.createElement('option');
                option.value = item.name;
                option.textContent = item.name;
                select.appendChild(option);
            });
            
            log(`成功加载 ${testData.length} 个测试线索分类`, 'success');
        }
        
        // API测试
        async function testAPI() {
            const statusDiv = document.getElementById('apiStatus');
            statusDiv.className = 'alert alert-info';
            statusDiv.textContent = '正在测试API连接...';
            
            try {
                log('开始测试API连接...');
                
                // 测试地区API
                const response = await fetch(`${API_BASE_URL}/regions?parent_id=0`);
                log(`地区API响应状态: ${response.status}`);
                
                if (response.ok) {
                    const data = await response.json();
                    log(`API响应数据: ${JSON.stringify(data, null, 2)}`);
                    
                    if (data.code === 200 && data.data) {
                        statusDiv.className = 'alert alert-success';
                        statusDiv.textContent = `✅ API连接成功！获取到 ${data.data.length} 条地区数据`;
                        log(`API测试成功，获取到 ${data.data.length} 条数据`, 'success');
                        
                        // 自动填充到下拉菜单
                        const select = document.getElementById('testTownship');
                        select.innerHTML = '<option value="">请选择乡镇街道</option>';
                        data.data.forEach(item => {
                            const option = document.createElement('option');
                            option.value = item.id;
                            option.textContent = item.name;
                            select.appendChild(option);
                        });
                    } else {
                        throw new Error('API返回数据格式错误');
                    }
                } else {
                    throw new Error(`HTTP ${response.status}: ${response.statusText}`);
                }
            } catch (error) {
                statusDiv.className = 'alert alert-danger';
                statusDiv.textContent = `❌ API连接失败: ${error.message}`;
                log(`API测试失败: ${error.message}`, 'error');
            }
        }
        
        async function testHealthCheck() {
            try {
                log('测试健康检查API...');
                const response = await fetch(`${API_BASE_URL}/health`);
                const data = await response.json();
                
                if (response.ok) {
                    log(`健康检查成功: ${JSON.stringify(data, null, 2)}`, 'success');
                } else {
                    log(`健康检查失败: ${data.message}`, 'error');
                }
            } catch (error) {
                log(`健康检查连接失败: ${error.message}`, 'error');
            }
        }
        
        // 页面加载时运行基本测试
        document.addEventListener('DOMContentLoaded', function() {
            log('页面加载完成，开始基本功能检测...');
            runBasicTests();
            
            // 5秒后自动测试API
            setTimeout(() => {
                log('自动测试API连接...');
                testAPI();
            }, 2000);
        });
    </script>
</body>
</html> 